<template>
    <div id="myExam">
        <div class="title">我的试卷</div>
        <div class="wrapper">
            <ul class="top">
                <li class="order">试卷列表</li>
                <li class="search-li">
                    <div class="icon"><input type="text" placeholder="试卷名称" class="search"
                                             v-model="this.formInline.key"><i class="el-icon-search"></i></div>
                </li>
                <li>
                    <el-button type="primary">搜索试卷</el-button>
                </li>
            </ul>
            <ul class="paper">
                <li class="item" v-for="(item,index) in tableData" :key="index">
                    <h4 @click="toPaperInfo(item.paperId)">{{item.paperId}}</h4>
                    <p class="name">暂无描述</p>
                    <div class="info">
                        <!--                        <i class="el-icon-loading"></i><span>{{item.tableData.substr(0,10)}}</span>-->
                        <i class="iconfont icon-icon-time"></i><span v-if="item.totalTime != null">限时60分钟</span>
                        <i class="iconfont icon-fenshu"></i><span>满分 100 分</span>
                    </div>
                </li>
            </ul>
            <div class="pagination">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="current"
                        :page-sizes="[6, 10, 20, 40]"
                        :page-size="size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </div>

        <el-drawer
                title="我是标题"
                :visible.sync="drawer"
                :with-header="false"
                size="80%"
               >
                  <div id="msg">
                <div class="title">
                  <span>试卷列表</span>
                </div>
                <div class="content">
                  <el-collapse v-model="activeName">
                    <el-collapse-item class="header" name="0">
                        <template slot="title" class="stitle" >
                            <div class="title">
                                <span><i class="header-icon el-icon-info"></i>{{this.paperId}}</span>
                                <span class="time">{{paperData.totalScore}}分</span>
                                <el-button type="primary" size="small">点击查看试题详情</el-button>
                            </div>
                        </template>
                      <el-collapse class="inner">
                        <el-collapse-item>
                          <template slot="title" name="1">
                            <div class="titlei">选择题 (共{{topicCount[0]}}题 共计{{score[0]}}分)</div>
                          </template>
                          <div class="contenti">
                            <ul class="question" v-for="(list, index) in topic[1]" :key="index">
                                <li>
                                    <el-checkbox @change="handleSelectionChange1(list.id)">
                                    {{index+1}}. {{list.question}} {{list.score}}分
                                    </el-checkbox>
                                </li>
                            </ul>
                          </div>
                        </el-collapse-item>
                        <el-collapse-item>
                          <template slot="title" name="2">
                            <div class="titlei">填空题 (共{{topicCount[1]}}题  共计{{score[1]}}分)</div>
                          </template>
                          <div class="contenti">
                            <ul class="question" v-for="(list, index) in topic[2]" :key="index">
                              <li>
                                  <el-checkbox @change="handleSelectionChange2(list.id)">
                                  {{topicCount[0]+index+1}}.{{list.question}}  {{list.score}}分
                                  </el-checkbox>
                              </li>
                            </ul>
                          </div>
                        </el-collapse-item>
                        <el-collapse-item>
                          <template slot="title" name="3">
                            <div class="titlei">判断题 (共{{topicCount[2]}}题 共计{{score[2]}}分)</div>
                          </template>
                          <div class="contenti">
                            <ul class="question" v-for="(list, index) in topic[3]" :key="index">
                              <li>
                                  <el-checkbox @change="handleSelectionChange3(list.id)">
                                      {{topicCount[0]+topicCount[1]+index+1}}. {{list.question}} {{list.score}}分
                                  </el-checkbox>
                              </li>
                            </ul>
                          </div>
                        </el-collapse-item>
                          <el-collapse-item>
                              <template slot="title" name="4">
                                  <div class="titlei">主观题 (共{{topicCount[3]}}题 共计{{score[3]}}分)</div>
                              </template>
                              <div class="contenti">
                                  <ul class="question" v-for="(list, index) in topic[4]" :key="index">
                                      <li>
                                          <el-checkbox @change="handleSelectionChange4(list.id)">
                                            {{topicCount[0]+topicCount[1]+topicCount[2]+index+1}}. {{list.question}} {{list.score}}分
                                          </el-checkbox>
                                      </li>
                                  </ul>
                              </div>
                          </el-collapse-item>
                      </el-collapse>
                    </el-collapse-item>
                  </el-collapse>

    </div>
          <el-button type="primary" icon="el-icon-delete" @click="add()" ></el-button>
          <el-button type="danger" icon="el-icon-delete" @click="batchDelete()" ></el-button>
  </div>
        </el-drawer>

    </div>
</template>

<script>
    export default {
        name: "TeacherPaper",
        data() {
            return {
                batchIds1: [], //批量删除多选框
                batchIds2: [], //批量删除多选框
                batchIds3: [], //批量删除多选框
                batchIds4: [], //批量删除多选框
                tableData: null, //所有考试信息
                current: 1, //当前页
                total: null, //记录条数
                size: 6, //每页条数
                formInline: {
                    "key": "",
                },
                drawer: false,

                activeName: '0',  //默认打开序号
                topicCount: [],//每种类型题目的总数
                score: [],  //每种类型分数的总数
                paperData: { //考试信息
                    source: null,
                    totalScore: 0,
                },
                topic: {  //试卷信息

                },
                paperId: '',
            }
        },
        created() {
            this.select()
        },
        methods: {
            //初始化页面数据
            init(paperId) {
                this.paperData.totalScore = 0;
                this.getRequest(`/paperManage/paper/${paperId}`).then(res => {  //通过examCode请求试卷详细信息
                    this.topic = res;
                    for (let key in res) {
                        let data = res[key]
                        this.topicCount.push(data.length)
                        let currentScore = 0
                        for (let i = 0; i < data.length; i++) { //循环每种题型,计算出总分
                            currentScore += data[i].score
                        }
                        this.paperData.totalScore += currentScore
                        this.score.push(currentScore) //把每种题型总分存入score
                    }
                })
            },
            handleSelectionChange1(val){
                alert(this.batchIds1.indexOf(val)>-1);
                if(this.batchIds1.indexOf(val)>-1){
                    this.batchIds1.splice(this.batchIds1.indexOf(val),1);
                }else{
                    this.batchIds1.push(val);
                }
                // this.batchIds = val;
            },handleSelectionChange2(val){
                alert(this.batchIds2.indexOf(val)>-1);
                if(this.batchIds2.indexOf(val)>-1){
                    this.batchIds2.splice(this.batchIds2.indexOf(val),1);
                }else{
                    this.batchIds2.push(val);
                }
                // this.batchIds = val;
            },handleSelectionChange3(val){
                alert(this.batchIds3.indexOf(val)>-1);
                if(this.batchIds3.indexOf(val)>-1){
                    this.batchIds3.splice(this.batchIds3.indexOf(val),1);
                }else{
                    this.batchIds3.push(val);
                }
                // this.batchIds = val;
            },handleSelectionChange4(val){
                alert(this.batchIds4.indexOf(val)>-1);
                if(this.batchIds4.indexOf(val)>-1){
                    this.batchIds4.splice(this.batchIds4.indexOf(val),1);
                }else{
                    this.batchIds4.push(val);
                }
                // this.batchIds = val;
            },
            add(){
                this.$router.push({path:'/teacher/teacherPaperAdd',query: {paperId: this.paperId}})
            },
            batchDelete(){
                let total = this.batchIds1.length+this.batchIds2.length+this.batchIds3.length+this.batchIds4.length
                this.$confirm('此操作将永久删除'+total+'条数据,是否继续?','提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    let ids1 = '?';
                    let ids2 = '?';
                    let ids3 = '?';
                    let ids4 = '?';
                    this.batchIds1.forEach(item=>{
                        ids1 += 'ids='+item + '&';
                    });
                    this.batchIds2.forEach(item=>{
                        ids2 += 'ids='+item + '&';
                    });
                    this.batchIds3.forEach(item=>{
                        ids3 += 'ids='+item + '&';
                    });
                    this.batchIds4.forEach(item=>{
                        ids4 += 'ids='+item + '&';
                    });

                    // let flag  = true;
                    if(this.batchIds1.length>0){
                        this.deleteRequest('/paperManage/deleteBatchIds/1/'+this.paperId+ids1).then(resp=>{
                            if(resp){
                                // this.init(this.paperId);
                                this.batchIds1 = [];
                            }
                        })
                    }
                    if(this.batchIds2.length>0) {
                        this.deleteRequest('/paperManage/deleteBatchIds/2/' + this.paperId + ids2).then(resp => {
                            if (resp) {
                                // this.init(this.paperId);
                                this.batchIds2 = [];
                            }
                        })
                    }
                    if(this.batchIds3.length>0) {
                        this.deleteRequest('/paperManage/deleteBatchIds/3/' + this.paperId + ids3).then(resp => {
                            if (resp) {
                                // this.init(this.paperId);
                                this.batchIds3 = [];
                            }
                        })
                    }
                    if(this.batchIds4.length>0) {
                        this.deleteRequest('/paperManage/deleteBatchIds/4/' + this.paperId + ids4).then(resp => {
                            if (resp) {
                                // this.init(this.paperId);
                                this.batchIds4 = [];
                            }
                        })
                    }
                    // this.init(this.paperId);
                    // this.drawer=false
                    // this.select();
                    this.$router.go(0);
                })
            },
            //获取当前所有考试信息
            select() {
                this.postRequest('/paperManage/papersIds/' + this.current + '/' + this.size, this.formInline).then(resp => {
                    // 看一下返回信息
                    // console.log(this.formInline);
                    // alert(JSON.stringify(resp));
                    if (resp) {
                        this.tableData = resp.data.records;
                        this.total = resp.data.total;
                    }
                })
            },
            // 分页改变每页数量
            handleSizeChange(size) {
                this.size = size;
                this.select();
            },
            // 分页改变当前页数
            handleCurrentChange(current) {
                this.current = current;
                this.select();
            },
            //跳转到试卷详情页
            toPaperInfo(paperId) {
                this.drawer = true;
                // this.$router.push({path: '/teacher/TeacherPaperInfo', query: {paperId: paperId}})
                this.paperId = paperId;
                this.init(paperId)
            }
        }
    }
</script>

<style>

    .el-drawer.rtl{
        overflow: scroll;
    }


    .paper .item a {
        color: #000;
    }

    .wrapper .top .order {
        cursor: pointer;
    }

    .wrapper .top .order:hover {
        color: #0195ff;
        border-bottom: 2px solid #0195ff;
    }

    .wrapper .top .order:visited {
        color: #0195ff;
        border-bottom: 2px solid #0195ff;
    }

    .item .info i {
        margin-right: 5px;
        color: #0195ff;
    }

    .item .info span {
        margin-right: 14px;
    }

    .paper .item {
        width: 380px;
        border-radius: 4px;
        padding: 20px 30px;
        border: 1px solid #eee;
        box-shadow: 0 0 4px 2px rgba(217, 222, 234, 0.3);
        transition: all 0.6s ease;
    }

    .paper .item:hover {
        box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45);
        transform: scale(1.03);
    }

    .paper .item .info {
        font-size: 14px;
        color: #88949b;
    }

    .paper .item .name {
        font-size: 14px;
        color: #88949b;
    }

    .paper * {
        margin: 20px 0;
    }

    .wrapper .paper {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .top .el-icon-search {
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .top .icon {
        position: relative;
    }

    .wrapper .top {
        border-bottom: 1px solid #eee;
        margin-bottom: 20px;
    }

    #myExam .search-li {
        margin-left: auto;
    }

    .top .search-li {
        margin-left: auto;
    }

    .top li {
        display: flex;
        align-items: center;
    }

    .top .search {
        margin-left: auto;
        padding: 10px;
        border-radius: 4px;
        border: 1px solid #eee;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }

    .top .search:hover {
        color: #0195ff;
        border-color: #0195ff;
    }

    .wrapper .top {
        display: flex;
    }

    .wrapper .top li {
        margin: 20px;
    }

    #myExam {
        width: 980px;
        margin: 0 auto;
    }

    #myExam .title {
        margin: 20px;
    }

    #myExam .wrapper {
        background-color: #fff;
    }

    .right {
        margin-left: auto;
    }

    .inner .contenti .question {
        margin-left: 40px;
        color: #9a9a9a;
        font-size: 14px;
    }

    .content .inner .titlei {
        margin-left: 20px;
        font-size: 16px;
        color: #88949b;
        font-weight: bold;
    }

    .content .title .time {
        font-size: 16px;
        margin-left: 420px;
        color: #999;
    }

    .content .stitle {
        background-color: #0195ff;
    }

    .content .title span {
        margin-right: 10px;
    }

    #msg .content .title {
        font-size: 20px;
        margin: 0px;
        display: flex;
        align-items: center;
    }

    .content {
        margin-top: 20px;
        background-color: #fff;
        overflow: auto;
        height: 100%;
    }

    .content .header {
        padding: 10px 30px;
    }

    .wrapper .info {
        margin: 20px 0px 0px 20px;
        border-top: 1px solid #eee;
        padding: 20px 0px 10px 0px;
    }

    .wrapper .info a {
        color: #88949b;
        font-size: 14px;
    }

    .wrapper .info a:hover {
        color: #0195ff;
    }

    .wrapper .bottom .btn {
        cursor: pointer;
        padding: 5px 10px;
        border: 1px solid #88949b;
        border-radius: 4px;
    }

    .wrapper .bottom {
        display: flex;
        margin-left: 20px;
        color: #999;
        font-size: 14px;
        align-items: center;
    }

    .wrapper .bottom li {
        margin-right: 14px;
    }

    #msg {
        background-color: #eee;
        width: 980px;
        margin: 0 auto;
    }

    #msg .title {
        margin: 20px;
    }

    #msg .wrapper {
        background-color: #fff;
        padding: 10px;
    }

    .wrapper .top {
        display: flex;
        margin: 20px;
        align-items: center;
    }

    .wrapper .top .right {
        margin-left: auto;
    }

    .wrapper .top .example {
        color: #333;
        font-size: 22px;
        font-weight: 700;
    }

    .wrapper .top li i {
        margin-left: 20px;
        color: #88949b;
    }

    .wrapper .right .count {
        margin-right: 60px;
        color: #fff;
        padding: 4px 10px;
        background-color: #88949b;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border: 1px solid #88949b;
    }

    .wrapper .right .score {
        position: absolute;
        left: 53px;
        top: -5px;
        padding: 1px 12px;
        font-size: 20px;
        color: #88949b;
        border: 1px dashed #88949b;
        border-left: none;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        font-weight: bold;
    }

    .wrapper .right div {
        position: relative;
    }
</style>
